<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop" ref="buttondiv" style="text-align:left">
            <div style="width:100%;">
                <div style="float:left;width:100%">
                    <table>
                        <tr>
                            <td>样本日期</td>
                            <td>
                                <el-date-picker v-model="sampledate1" value-format="yyyy-MM-dd" :picker-options="pickerOptions" style="width:130px"></el-date-picker> --
                                <el-date-picker v-model="sampledate2" value-format="yyyy-MM-dd" :picker-options="pickerOptions" style="width:130px"></el-date-picker>
                            </td>
                            <td>报告单元</td>
                            <td>
                                <rm-ddl-rptunit v-model="rptunitid" width="160px" :clearable="true" defaultflag="1" @change="rptunitChange"></rm-ddl-rptunit>
                            </td>
                            <td>操作人</td>
                            <td>
                                <rm-ddl-common :appendtobody="true" datatype="reportuser" v-model="rptusr" width="120px" @change="rptusrChange"></rm-ddl-common>
                            </td>
                            <td>操作内容</td>
                            <td>
                                <el-input v-model="logcontent" style="width:120px" clearable></el-input>
                            </td>
                            <td style="text-align:left">
                                <el-checkbox v-model="onlyshowprint" false-label="0" true-label="1">仅显示已发过的报告单</el-checkbox>
                            </td>
                            <td style="text-align:left">
                                <el-checkbox v-model="updatenodel" false-label="0" true-label="1">操作类型中修改不包括删除</el-checkbox>
                            </td>
                        </tr>
                        <tr>
                            <td>操作日期</td>
                            <td>
                                <el-date-picker v-model="logdate1" value-format="yyyy-MM-dd" :picker-options="pickerOptions" :clearable="false" style="width:130px"></el-date-picker> --
                                <el-date-picker v-model="logdate2" value-format="yyyy-MM-dd" :picker-options="pickerOptions" :clearable="false" style="width:130px"></el-date-picker>
                            </td>
                            <td>操作类型</td>
                            <td>
                                <el-select style="width:160px" v-model="logtype">
                                    <el-option v-for="item in logtypeOptions" :key="item.codeno" :value="item.codeno" :label="item.codena+'['+item.codeno+']'"></el-option>
                                </el-select>
                            </td>
                            <td>病历号</td>
                            <td>
                                <el-input v-model="patno" style="width:120px" clearable></el-input>
                            </td>
                            <td>病人姓名</td>
                            <td>
                                <el-input v-model="patname" style="width:120px" clearable></el-input>
                            </td>
                            <td style="text-align:left">
                                <el-checkbox v-model="onlyshowupdate" false-label="0" true-label="1">仅显示修改结果的</el-checkbox>
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="width:100%;text-align:right;padding-right: 5px">
                    <el-button @click="findList()" icon="el-icon-search" type="primary" v-has="'PINQUERY'">查询</el-button>
                    <el-button @click="exportData()" icon="el-icon-files">导出</el-button>
                </div>
            </div>
        </div>
        <div class="pagecenter">
            <rm-layout-right splitcolor="#ffffff" :splitwidth="3" :fixsize="360" :minfixsize="360" ref="layoutright">
                <div style="height:100%">
                    <vxe-table :data="tableData" :loading="loading" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" :row-class-name="rowClassName" :select-config="selectConfig" :sort-config="{ trigger: 'cell' }" @current-change="currentChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini">
                        <vxe-table-column field="log_date" title="操作日期" width="120px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="rptlogtypename" title="操作类型" width="60px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="username" title="操作者" width="60px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="log_content" title="操作内容" width="160px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="rptunitname" title="报告单元" width="80px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="sampledate" title="标本日期" width="80px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="sampleno" title="标本号" width="60px" align="center" sortable :sort-width="20"></vxe-table-column>
                        <vxe-table-column field="pat_name" title="姓名" width="60px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_sexname" title="性别" width="40px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_agestr" title="年龄" width="40px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_typecodename" title="病人类型" width="60px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="deptname" title="科室" width="80px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="wardname" title="病区" width="80px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_bedno" title="床号" width="60px" align="center"></vxe-table-column>
                        <vxe-table-column field="barcode" title="条码号" width="100px" align="center"></vxe-table-column>
                        <vxe-table-column field="computer_name" title="操作机器名" width="100px" align="center">
                            <template v-slot="{ row }">
                                <span style="color:blue;">{{row.computer_name}}</span>
                                <i class="el-icon-refresh" @click="repalceComputerName(row)"></i>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="mac_address" title="操作机器MAC" width="120px" align="center"></vxe-table-column>
                        <vxe-table-column field="reportid" title="报告ID" width="120px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="reportflag" title="报告标志" width="60px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="firstrechkdt" title="报告初次审核时间" width="120px" align="center"></vxe-table-column>
                        <vxe-table-column field="pat_no" title="病历号" width="100px" align="center"></vxe-table-column>
                        <vxe-table-column field="passtime" title="审核后修改(分钟)" width="100px" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="report_dt" title="报告时间" width="120px" align="center"></vxe-table-column>
                    </vxe-table>
                </div>
                <template v-slot:fix>
                    <div style="height:100%" v-show="!showcontent">
                        <vxe-table :data="tableDataDetail" :loading="loadingDetail" :select-config="selectConfig" :sort-config="{ trigger: 'cell' }" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="xTable1" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini">
                            <vxe-table-column field="objecttypename" title="修改类型" width="80px" align="center"></vxe-table-column>
                            <vxe-table-column field="columnnamecn" title="修改对象" width="120px"></vxe-table-column>
                            <vxe-table-column field="oldvalue" title="修改/复查前取值" width="100px"></vxe-table-column>
                            <vxe-table-column field="newvalue" title="修改/复查后取值" width="100px"></vxe-table-column>
                        </vxe-table>
                    </div>
                    <div style="height:100%;width:100%;word-wrap: break-word;word-break: break-all;overflow: hidden;border:1px solid #ccc" v-show="showcontent">
                        {{ selectlogcontent }}
                    </div>
                </template>
            </rm-layout-right>
        </div>
    </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
    name: "LIS480",
    data() {
        return {
            loading: false,
            tableData: [],
            tableDataDetail: [],
            loadingDetail: false,
            selectlogcontent: "",
            showcontent: false,
            keyConfig: {
                isDel: true,
                isTab: true,
                isEdit: true
            },
            keyLocalConfig: {
                isArrow: true
            },
            selectConfig: { tigger: "row" },
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", XEUtils.toDateString(new Date(), "yyyy-MM-dd 00:00:00"));
                        }
                    }
                ]
            }, //日期配置将时间切换到当天
            sampledate1: "",
            sampledate2: "",
            logdate1: "",
            logdate2: "",
            rptunitid: 0,
            rptusr: "",
            patno: "",
            logtype: "02",
            logtypeOptions: [],
            logcontent: "",
            patname: "",
            onlyshowprint: "0",
            onlyshowupdate: "0",
            updatenodel: "0",
            rptunitname: "",
            rptusrname: "",
        };
    },
    created() {
        this.InitOption();
    },
    methods: {
        rowClassName({ row }) {
            if (row.rptlogtype == "08") {
                return "rm-alert";
            }
        },
        currentChangeEvent({ row }) {
            this.findDetail(row);
        },
        findList() {
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS480",
                    method: "post",
                    data: {
                        action: "queryLog",
                        sampledate1: this.sampledate1,
                        sampledate2: this.sampledate2,
                        transdate1: this.logdate1,
                        transdate2: this.logdate2,
                        rptunitid: this.rptunitid,
                        logtype: this.logtype,
                        loguser: this.loguser,
                        logcontent: this.logcontent,
                        patno: this.patno,
                        patname: this.patname,
                        onlyshowprint: this.onlyshowprint,
                        onlyshowupdate: this.onlyshowupdate,
                        updatenodel: this.updatenodel
                    }
                })
                .then(res => {
                    if (res && !res.hasOwnProperty("errcode")) {
                        this.tableData = res;
                        if (this.tableData.length > 0) {
                            this.findDetail(this.tableData[0]);
                            setTimeout(() => {
                                this.$refs.xTable.setCurrentRow(this.tableData[0]);
                            }, 1);
                        } else {
                            this.findDetail(null);
                        }
                    }
                });
        },
        findDetail(row) {
            if (row == null) {
                this.tableDataDetail = [];
                this.selectlogcontent = "";
                return;
            }
            if (row.rptlogtype != "02" && row.rptlogtype != "01" && row.rptlogtype != "08") {
                this.selectlogcontent = row.log_content;
                this.showcontent = true;
                return;
            }
            this.showcontent = false;
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS480",
                    method: "post",
                    data: {
                        action: "queryDetail",
                        rptlogid: row.rpt_logid
                    }
                })
                .then(res => {
                    if (res && res.flag == "1") {
                        this.tableDataDetail = res.data;
                    }
                });
        },
        InitOption() {
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS480",
                    method: "post",
                    data: {
                        action: "initOptions"
                    }
                })
                .then(res => {
                    if (res && !res.hasOwnProperty("errcode")) {
                        this.logdate1 = res.time;
                        this.logdate2 = XEUtils.clone(res.time, true);
                        this.logtypeOptions = res.logtypes;
                    }
                });
        },
        rptunitChange(code, name) {
            this.rptunitid = code;
            this.rptunitname = name;
        },
        rptusrChange(code, name) {
            this.rptusr = code;
            this.rptusrname = name;
        },
        exportData() {
            let tableColumn = this.$refs.xTable.getColumns();
            let extableColumn = [];
            tableColumn.forEach(item => {
                extableColumn.push({ title: item.title, field: item.property });
            });
            let filtertxt = this.getExportFilter();
            this.$pub.exportTableExcel(this.$refs.xTable.afterFullData, extableColumn, "LIS480 标本修改记录查询结果.xlsx", filtertxt);
        },
        // 获取当前导出文件的所有查询条件
        getExportFilter() {
            let filtertxt = "操作日期:" + XEUtils.toDateString(this.logdate1, "yyyy-MM-dd") + "至" + XEUtils.toDateString(this.logdate2, "yyyy-MM-dd") + "; ";
            let sampledttxt = "";
            if(this.sampledate1) sampledttxt += XEUtils.toDateString(this.sampledate1, "yyyy-MM-dd");
            if(this.sampledate2) sampledttxt += "至" + XEUtils.toDateString(this.sampledate2, "yyyy-MM-dd");
            if(sampledttxt) filtertxt += "样本日期:" + sampledttxt + "; ";
            if(this.rptunitid) filtertxt += "报告单元:" + this.rptunitname + "; ";
            if(this.rptusr) filtertxt += "操作人:" + this.rptusr + "; ";
            if(this.logcontent) filtertxt += "操作内容:" + this.logcontent + "; ";
            if(this.onlyshowprint == "1") filtertxt += "仅显示已发过的报告单; ";
            if(this.updatenodel == "1") filtertxt += "操作类型中修改不包括删除; ";
            if(this.logtype) filtertxt += "操作类型:" + this.getOptionName(this.logtypeOptions.filter((item) =>  this.logtype == item.codeno)) + "; ";
            if(this.patno) filtertxt += "病历号:" + this.patno + "; ";
            if(this.patname) filtertxt += "病人姓名:" + this.patname + "; ";
            if(this.onlyshowupdate == "1") filtertxt += "仅显示修改结果的; ";
            return filtertxt;
        },
        getOptionName(option) {
            if (option && option.length > 0) {
                let optionname = "";
                option.forEach((item) => {
                    if (item.hasOwnProperty("codena")) {
                        optionname += item.codena +'['+item.codeno+']' + ",";
                    } else if (item.hasOwnProperty("label")) {
                        optionname += item.label + ",";
                    } else {
                        optionname += item.display + ",";
                    }
                });
                return optionname.substring(0, optionname.length - 1);
            } else {
                return "";
            }
        },
        repalceComputerName(row) {
            this.$pub.getComputerName(row.mac_address)
                .then((name)=> {
                    row.computer_name = name;
                })
                .catch(()=> {
                    this.$message.error("机器名称查询失败！");
                    //保持原样
                });
        },
    }
};
</script>

<style>
.pagetop {
    left: 0;
    right: 0;
    height: 95px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 100px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.pagetop table tr td:nth-child(odd) {
    text-align: right;
    white-space: nowrap;
}
.pagetop table tr td:nth-child(even) {
    text-align: left;
}
.pagetop table tr td:nth-child(1) {
    width: 60px;
}
.pagetop table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}
</style>